<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <!-- Link Swiper's CSS -->
  <!-- <link rel="stylesheet" href="../package/swiper-bundle.min.css"> -->
  <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> -->
  <!-- Demo styles -->
  <link rel="stylesheet" href="./test.css">
</head>

<body>
  <div class="swiperBox">
    <div class="swiper-container gallery-top">
      <div class="swiper-wrapper">
        <!-- <div class="swiper-slide" style="background-image:url(../img/1.jpg)" data-index="1">
          <img src="" alt="">
        </div> -->
      </div>
    </div>
    <div class="bottom">
      <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
          <!-- <div class="swiper-slide" style="background-image:url(../img/1.jpg)" data-index="1"></div>-->
        </div>
      </div>
      <!-- Add Arrows -->
      <div class="swiper-button-next swiper-button-white"></div>
      <div class="swiper-button-prev swiper-button-white"></div>
    </div>
  </div>
  <!-- Swiper -->

  <!-- Swiper JS -->
  <!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script> -->

  <!-- Initialize Swiper -->
  <!-- <script>
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 3,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: galleryThumbs
      }
    });
  </script> -->

  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="./test.js"></script>

</body>

</html>